<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    :unmount-on-close="true"
    :modal-class="'search-modal'"
    :align-center="false"
    :top="'121px'"
    v-bind="$attrs"
    @cancel="handleCancel"
  >
    <template #title>
      <div class="modal-title-box">
        <div class="left">{{ props.title }}</div>
        <div class="right"></div>
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <div class="modal-footer-box">
        <a-button type="outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleBeforeOk">确定</a-button>
      </div>
    </template>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { defineProps, watch, ref } from 'vue';

  const emit = defineEmits(['update:visible']);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    user: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rootDeptName: {
      type: String,
      default: '',
    },
  });
  const visible = ref(false);
  watch(
    () => props.visible,
    (n) => {
      visible.value = n;
    }
  );

  const handleCancel = () => {
    emit('update:visible', false);
  };

  const handleBeforeOk = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less">
  .search-modal {
    display: flex !important;
    flex-direction: column;
    width: 1000px !important;
    height: 492px;
    background: #fff;

    .arco-modal-header {
      .arco-modal-title {
        .modal-title-box {
          width: 100%;
          text-align: left;

          .left {
            color: #1e2228;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }

    .arco-modal-body {
      height: calc(100% - 108px);
      padding: 16px 24px;
    }

    .arco-modal-footer {
      padding: 10px 24px;

      button {
        margin-left: 8px;
        padding: 5px 16px;
        font-size: 14px;
        line-height: 22px;
        border-radius: 4px;
      }
    }
  }
</style>
